<template>
  <div class="container">
    <!-- 左边部分 -->
    <div class="con-a">
      <div class="left-section">
        <!-- 左边顶部 -->
        <div class="left-header">
          <div class="policy-type">
            <img src="@/assets/industrialPolicy/zc.svg" alt="政策图标" class="policy-icon">
            <span class="policy-text">政策类型</span>
          </div>
          <div class="vertical-line"></div>
          <div class="tabs">
            <div
                v-for="(tab, index) in tabs"
                :key="index"
                :class="['tab-item', { 'active': activeTab === index }]"
                @click="changeTab(index)"
            >
              {{ tab }}
            </div>
          </div>
        </div>

        <!-- 左边内容 -->
        <div class="left-content">
          <div
              v-for="(item, index) in currentPolicyData"
              :key="index"
              class="policy-item"
              @click="selectPolicy(item)"
          >
            <div class="date-section">
              <div class="day-month">{{ item.date.dayMonth }}</div>
              <div class="year">{{ item.date.year }}</div>
            </div>
            <div class="vertical-line"></div>
            <div class="content-section">
              <div class="title">{{ item.title }}</div>
              <div class="description">{{ item.description }}</div>
              <div class="meta">
                <span class="publisher">发布机构：{{ item.publisher }}</span>
                <span class="category">技术领域：{{ item.category }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右边部分 -->
      <div class="right-section">
        <!-- 推荐要闻 -->
        <div class="right-block">
          <div class="block-header">
            <img src="@/assets/industrialPolicy/tuijian.svg" alt="推荐图标" class="block-icon">
            <span class="block-title">推荐要闻</span>
          </div>
          <div class="block-content">
            <div
                v-for="(item, index) in recommendedNews.slice(0, 5)"
                :key="index"
                class="news-item"
                @click="selectNews(item)"
            >
              <img :src="item.image" alt="新闻图片" class="news-image">
              <div class="news-content">
                <div class="news-title">{{ item.title }}</div>
                <div class="news-desc">{{ item.description }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 点击排行 -->
        <div class="right-block">
          <div class="block-header">
            <img src="@/assets/industrialPolicy/tuijian.svg" alt="排行图标" class="block-icon">
            <span class="block-title">点击排行</span>
          </div>
          <div class="block-content">
            <div
                v-for="(item, index) in rankingList.slice(0, 5)"
                :key="index"
                class="rank-item"
                @click="selectRank(item)"
            >
              <div class="rank-number" :style="{ backgroundColor: rankColors[index] }">
                {{ index + 1 }}
              </div>
              <div class="rank-title">{{ item.title }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <contact-footer></contact-footer>
  </div>
</template>

<script>
import ContactFooter from "@/view/homeComponents/banner.vue";

export default {
  components: {ContactFooter},
  data() {
    return {
      tabs: ['政策通知', '政策文件', '政策公告', '政策要闻', '政策解读'],
      activeTab: 0,
      rankColors: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#A37EBD', '#FFA07A'],
      policyData: {
        0: [
          {
            date: {dayMonth: '26/10月', year: '2023年'},
            title: '关于促进数字经济高质量发展的若干政策措施',
            description: '为深入贯彻落实国家数字经济发展战略，加快推动我市数字经济高质量发展...',
            publisher: '北京市人民政府',
            category: '数字经济'
          },
          {
            date: {dayMonth: '15/09月', year: '2023年'},
            title: '关于开展2023年度科技创新项目申报工作的通知',
            description: '为进一步推动科技创新，现组织开展2023年度科技创新项目申报工作...',
            publisher: '科技部',
            category: '科技创新'
          },
          {
            date: {dayMonth: '26/10月', year: '2023年'},
            title: '关于促进数字经济高质量发展的若干政策措施',
            description: '为深入贯彻落实国家数字经济发展战略，加快推动我市数字经济高质量发展...',
            publisher: '北京市人民政府',
            category: '数字经济'
          },
          {
            date: {dayMonth: '15/09月', year: '2023年'},
            title: '关于开展2023年度科技创新项目申报工作的通知',
            description: '为进一步推动科技创新，现组织开展2023年度科技创新项目申报工作...',
            publisher: '科技部',
            category: '科技创新'
          },
          {
            date: {dayMonth: '26/10月', year: '2023年'},
            title: '关于促进数字经济高质量发展的若干政策措施',
            description: '为深入贯彻落实国家数字经济发展战略，加快推动我市数字经济高质量发展...',
            publisher: '北京市人民政府',
            category: '数字经济'
          },
          {
            date: {dayMonth: '15/09月', year: '2023年'},
            title: '关于开展2023年度科技创新项目申报工作的通知',
            description: '为进一步推动科技创新，现组织开展2023年度科技创新项目申报工作...',
            publisher: '科技部',
            category: '科技创新'
          }
        ],
        1: [
          {
            date: {dayMonth: '03/11月', year: '2023年'},
            title: '关于印发《人工智能产业发展规划》的通知',
            description: '为促进人工智能产业健康发展，特制定本规划...',
            publisher: '工业和信息化部',
            category: '人工智能'
          },
          {
            date: {dayMonth: '18/08月', year: '2023年'},
            title: '关于发布《绿色建筑评价标准》的公告',
            description: '新版《绿色建筑评价标准》将于2024年1月1日起正式实施...',
            publisher: '住房和城乡建设部',
            category: '建筑工程'
          }
        ],
        // 政策公告数据
        2: [
          {
            date: {dayMonth: '05/12月', year: '2023年'},
            title: '关于2023年度高新技术企业认定结果的公告',
            description: '根据《高新技术企业认定管理办法》有关规定，现将2023年度高新技术企业认定结果予以公布...',
            publisher: '科技部',
            category: '高新技术'
          }
        ],
        // 政策要闻数据
        3: [
          {
            date: {dayMonth: '12/11月', year: '2023年'},
            title: '国家发展改革委召开数字经济专题新闻发布会',
            description: '国家发展改革委今日召开专题新闻发布会，介绍我国数字经济发展情况...',
            publisher: '国家发展改革委',
            category: '数字经济'
          },
          {
            date: {dayMonth: '25/10月', year: '2023年'},
            title: '全国科技创新大会在京召开',
            description: '会议强调要加快实现高水平科技自立自强，为建设世界科技强国而奋斗...',
            publisher: '科技部',
            category: '科技创新'
          }
        ],
        // 政策解读数据
        4: [
          {
            date: {dayMonth: '08/11月', year: '2023年'},
            title: '《数据要素市场化配置改革方案》解读',
            description: '国家发展改革委相关负责人对《数据要素市场化配置改革方案》进行解读...',
            publisher: '国家发展改革委',
            category: '数据要素'
          }
        ]
      },
      recommendedNews: [
        {
          image: require('@/assets/industrialPolicy/zckx.svg'),
          title: '国家发改委发布新型基础设施建设三年行动计划',
          description: '计划提出到2025年，初步建成集约高效、经济适用、智能绿色...'
        },
        {
          image: require('@/assets/industrialPolicy/zckx.svg'),
          title: '国家发改委发布新型基础设施建设三年行动计划',
          description: '计划提出到2025年，初步建成集约高效、经济适用、智能绿色...'
        },
        {
          image: require('@/assets/industrialPolicy/zckx.svg'),
          title: '国家发改委发布新型基础设施建设三年行动计划',
          description: '计划提出到2025年，初步建成集约高效、经济适用、智能绿色...'
        },
        {
          image: require('@/assets/industrialPolicy/zckx.svg'),
          title: '国家发改委发布新型基础设施建设三年行动计划',
          description: '计划提出到2025年，初步建成集约高效、经济适用、智能绿色...'
        },
        {
          image: require('@/assets/industrialPolicy/zckx.svg'),
          title: '国家发改委发布新型基础设施建设三年行动计划',
          description: '计划提出到2025年，初步建成集约高效、经济适用、智能绿色...'
        },
        // 更多数据...
      ],
      rankingList: [
        {title: '关于组织开展2023年度高新技术企业认定工作的通知'},
        {title: '关于印发科技创新券实施办法的通知'},
        {title: '关于申报2023年度科技型中小企业技术创新资金项目的通知'},
        {title: '关于开展2023年度科技成果转化项目征集工作的通知'},
        {title: '关于发布2023年度重点研发计划项目指南的通知'}
      ]
    }
  },
  computed: {
    currentPolicyData() {
      return this.policyData[this.activeTab] || []
    }
  },
  methods: {
    changeTab(index) {
      this.activeTab = index
    },
    selectPolicy(item) {
      console.log('选中政策:', item)
      // 实际项目中这里可以跳转到详情页
    },
    selectNews(item) {
      console.log('选中新闻:', item)
    },
    selectRank(item) {
      console.log('选中排行:', item)
    }
  }
}
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  .con-a{
   max-width: 1200px;
    margin: 0 auto;
    display: flex;
    padding: 20px;
  }
}

.left-section {
  width: 65%;
  background: white;
  padding: 20px;
  margin-right: 20px;
  border-radius: 8px;
}

.right-section {
  width: 35%;
  display: flex;
  flex-direction: column;
}

.right-block {
  background: white;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
}

.left-header {
  display: flex;
  align-items: center;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.policy-type {
  display: flex;
  align-items: center;
}

.policy-icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.policy-text {
  font-size: 18px;
  font-weight: bold;
  text-align: left;
}

.vertical-line {
  width: 1px;
  height: 30px;
  background-color: #e0e0e0;
  margin: 0 20px;
}

.tabs {
  display: flex;
  text-align: left;
}

.tab-item {
  padding: 8px 15px;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  text-align: left;
}

.tab-item.active {
  color: #1890ff;
  font-weight: bold;
  border-bottom: 2px solid #1890ff;
}

.policy-item {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  text-align: left;
}

.policy-item:hover {
  background-color: #f9f9f9;
}

.date-section {
  width: 80px;
  text-align: left;
}

.day-month {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.year {
  font-size: 12px;
  color: #999;
}

.content-section {
  flex: 1;
  padding-left: 20px;
  text-align: left;
}

.title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
  text-align: left;
}

.description {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left;
  font-size: 12px;
}

.meta {
  font-size: 10px;
  color: #999;
  text-align: left;
  padding-top: 10px;
}

.publisher {
  margin-right: 15px;
}

.block-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  text-align: left;
}

.block-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.block-title {
  font-size: 16px;
  font-weight: bold;
  text-align: left;
}

.news-item {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  text-align: left;
}

.news-item:hover {
  background-color: #f9f9f9;
}

.news-image {
  width: 80px;
  height: 70px;
  object-fit: cover;
  margin-right: 10px;
  border-radius: 4px;
}

.news-content {
  flex: 1;
  text-align: left;
}

.news-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left;
}

.news-desc {
  font-size: 12px;
  line-height: 2.0;
  color: #999;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left;
}

.rank-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  text-align: left;
}

.rank-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-right: 10px;
  flex-shrink: 0;
}

.rank-title {
  font-size: 14px;
  color: #333;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  .left-section, .right-section {
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
  }
}
</style>